<template>
<div class="rank">


  <div class="title">


    <span @click="back"><img src="../img/back.png" alt=""></span>
    <span>排行榜</span>
  </div>
  <p>官方榜</p>
  <div class="guanfang"  >

    <ul>
      <li v-for="(key,item) in rank" @click="musci(keyS[item])">
        <span class="simg">
          <span class="s1"><img :src=imgarr[item] alt=""></span>
          <span class="s2">每天更新</span>
          <!--<span v-show="false">{{keyS[item]}}</span>-->
        </span>
        <span class="stext">
          <p>{{one[item]}} - {{name1[item]}}</p>
          <p>{{two[item]}} - {{name2[item]}}</p>
          <p>{{three[item]}} - {{name3[item]}}</p>
        </span>
      </li>
    </ul>
  </div>

</div>
</template>

<script>
  import {mapState,mapGetters,mapMutations,mapActions} from 'vuex';

    export default {
        name: "ranklist",
      data(){
          return{
            rank:['新歌榜','热歌榜','原创榜','飙升榜','人气榜','畅销榜'],
           one:[],
            two:[],
            three:[],
            list:[],
            name1: [],
            name2: [],
            name3: [],
            imgarr:[],
            keyS:[],
          }
      },
      // computed:{
      //   ...mapState(['a','b']),
      //   ...mapGetters(['reverseB']),
      //
      // },
      methods:{
        name(){
                for(let i = 0; i < 6; i ++){
                  this.$http.get(`http://localhost:3000/top/list?idx=${i}`)
                    .then((res) => {
                      console.log(res);
                      this.list.push(res);
                      if(this.list.length === 6){
                        for(let j = 0; j <this.list.length ; j ++){
                          this.one.push(this.list[j].data.playlist.tracks[0].name);
                          this.two.push(this.list[j].data.playlist.tracks[1].name);
                          this.three.push(this.list[j].data.playlist.tracks[2].name);
                          this.name1.push(this.list[j].data.playlist.tracks[0].ar[0].name);
                          this.name2.push(this.list[j].data.playlist.tracks[1].ar[0].name);
                          this.name3.push(this.list[j].data.playlist.tracks[2].ar[0].name);
                          this.imgarr.push(this.list[j].data.playlist.coverImgUrl);
                          this.keyS.push(this.list[j].config.url.split('=')[1]);
                          console.log(this.keyS);
                          console.log(this.list[j].data.playlist.coverImgUrl);
                        }
                      }
                    });
                }
                },
        // ...mapMutations(['addA']),
        // ...mapActions(['delA']),
        back(){
          this.$router.push({ path:'/index'})
        },
        musci(item){
          console.log(item);
         this.$router.push({path:'/music',query:{msgKey:item}})
        }
      },
      mounted(){
      this.name();

    },
    }
</script>

<style lang="scss">
.rank{
  .title{
    padding: 0 15px;
    span{
      font-size: 40px;
      display: inline-block;
      vertical-align: middle;
      img{
        width: 80px;
        vertical-align: middle;
      }
    }
  }
  p{
    padding-top: 30px;
    box-sizing: border-box;
    padding-left: 15px;
    font-size: 40px;
    font-weight: bold;
  }
  .guanfang{
    padding: 0 15px;
    margin-top: 60px;

    ul{
      li{
        margin-bottom: 30px;
        list-style: none;
        span{
          display: inline-block;
          vertical-align: middle;
        }
        .simg{
          width: 300px;
          height: 300px;
          border-radius: 30px;
          position: relative;


          .s1{
         img{
           width: 300px;
           height: 300px;
         }
          }
          .s2{
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: white;
            font-size: 20px;
          }
        }
        .stext{
          width: 800px;
          height: 300px;
          p{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            padding:unset;
            -webkit-box-orient: vertical;
          font-weight: unset;
            margin-top: 40px;
            width: 100%;
            font-size: 30px;
          }
        }
      }
    }
  }
}
</style>
